<template>
  <t-link
    v-permission="['system:single-product-contract:query']"
    theme="primary"
    @click="handleOpenDialog"
  >
    查看合同
  </t-link>
  <t-dialog v-model:visible="visible" attach="body" header="查看合同" width="58%">
    <!-- 内容 -->
    <template v-if="contractDetails.id">
      <div style="margin-bottom: var(--td-comp-margin-s)">
        <span v-if="contractDetails.result !== null" style="margin-left: var(--td-comp-margin-s)"
        ><t-tag :theme="getTagThemeAndLabel(contractDetails.result - 1).theme">{{
          getTagThemeAndLabel(contractDetails.result - 1).label
        }}</t-tag>
      </span>
      </div>      
      <t-descriptions  bordered :column="4">
        <t-descriptions-item >
          <template #label>
            <span><span style="color: #d54941;margin-right:4px;">*</span>收货人</span>
          </template>
          {{ contractDetails.consignee }}
        </t-descriptions-item>
        <t-descriptions-item :span="3">
          <template #label>
            <span><span style="color: #d54941;margin-right:4px;">*</span>收货地址</span>
          </template>
          {{ contractDetails.deliverGoodsAddress }}
        </t-descriptions-item>
        
        <t-descriptions-item   >
          <template #label>
            <span><span style="color: #d54941;margin-right:4px;">*</span>送货时间</span>
          </template>
          {{ dayjs(contractDetails.deliverGoodsTime).format('YYYY-MM-DD') }}
        </t-descriptions-item>
        <t-descriptions-item >
          <template #label>
            <span><span style="color: #d54941;margin-right:4px;">*</span>产品合同总价</span>
          </template>
          {{ contractDetails.productContractPrice }}
        </t-descriptions-item>
        <t-descriptions-item >
          <template #label>
            <span><span style="color: #d54941;margin-right:4px;">*</span>已收金额</span>
          </template>
          {{ contractDetails.amountCollected }}
        </t-descriptions-item>
        <t-descriptions-item label="下单时间">
          {{ contractDetails.placeAnOrderTime?dayjs(contractDetails.placeAnOrderTime).format('YYYY-MM-DD HH:mm:ss'):'' }}
        </t-descriptions-item>
        <t-descriptions-item label="送柜子时间">
          {{ contractDetails.songGuiziTime?dayjs(contractDetails.songGuiziTime).format('YYYY-MM-DD HH:mm:ss'):'' }}
        </t-descriptions-item>
        <t-descriptions-item label="验收时间">
          {{ contractDetails.acceptanceCheckTime?dayjs(contractDetails.acceptanceCheckTime).format('YYYY-MM-DD HH:mm:ss'):'' }}
        </t-descriptions-item>
        <t-descriptions-item label="合同文件" :span="4">
          <upload v-model:files="contractDetails.fileUrl" multiple disabled v-if="contractDetails.fileUrl && Array.isArray(contractDetails.fileUrl)"/>
        </t-descriptions-item>
       
      </t-descriptions>


    </template>
    <!-- 空 -->
    <t-empty v-else style="margin: 100px" title="暂无合同信息">
      
    </t-empty>
    <template #footer>
      <t-button theme="default" @click="visible = false">取消</t-button>
      <!-- <t-button :loading="loadingSubmit" @click="handleSelectedIds">保存</t-button> -->
    </template>
  </t-dialog>
 
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { MessagePlugin } from 'tdesign-vue-next';
import { ref } from 'vue';
import { getContractByOrderId, orderContractZhengCRUD } from '@/api/finance/contract';
import { engineeringConfigCRUD } from '@/api/config/common-config';
import ImageViewer from '@/components/image-viewer/index.vue';
import Upload from '@/components/upload/index.vue';
import { useDictionaryStore } from '@/store';
import listToTree from '@/utils/listToTree';
import { singleProductContractCRUD } from '@/api/order/single';

interface TagThemeAndLabel {
  theme: 'warning' | 'success' | 'danger' | 'default';
  label: string;
}
// 字典仓库
const dictionaryStore = useDictionaryStore();

// props
const props = defineProps({
  // 期款id
  id: {
    type: Number,
    required: true,
  },
  orderId: {
    type: Number,
    required: true,
  },
});
// emits
const emits = defineEmits(['requestSuccess']);

const visible = ref(false)
// 打开对话框
const handleOpenDialog = () => {
  visible.value = true
  handleGetContractDetails();
}
// 整装合同id
const zzContractId = ref()
// 合同详情
const contractDetails = ref<Record<string, any>>({});

// 处理获取合同详情
const handleGetContractDetails = () => {
  const params = {
    orderId: props.orderId,
  };
  singleProductContractCRUD.page(params)
    .then((data) => {
      // if (data) contractDetails.value = data.list[0] || {};
      if(data.total>0) {
        zzContractId.value = data.list[0].id
        handleGetContractZheng({id:data.list[0].id})
      } else {
        contractDetails.value={}
      } 
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    })
    
};
const handleGetContractZheng = (params:Record<string,any>) =>{
  singleProductContractCRUD.get(params).then(res=>{
    res.fileUrl = JSON.parse(res.fileUrl)
    contractDetails.value=res
  })
};
// 根据审批状态获取标签样式以及文字
const getTagThemeAndLabel = (result: number): TagThemeAndLabel => {
  const map: TagThemeAndLabel[] = [
    {
      theme: 'warning',
      label: '待审批',
    },
    {
      theme: 'success',
      label: '审批通过',
    },
    {
      theme: 'danger',
      label: '审批不通过',
    },
    {
      theme: 'danger',
      label: '审批已取消',
    },
  ];

  return result in map ? map[result] : { theme: 'default', label: '未知状态' };
};
// 处理对话框请求成功
const handleDialogRequestSuccess = (result: Record<string, any>) => {
  emits('requestSuccess', result);
};
</script>
<style lang="less" scoped>
.text-only-cascader {
  :deep(.t-input__suffix-icon) {
    display: none;
  }
  
}
</style>
